import React, { useState } from "react"
import copy from "copy-to-clipboard"
import { Plus, Key, Copy, Trash2 } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card"
import { ColumnDef } from "@tanstack/react-table"
import { cn } from "@/lib/utils"
import DataTable from "@/components/ui/data-table"
import { useToast } from "@/hooks/use-toast"

type ApiKey = {
  id: number
  name: string
  key: string
  status: string
  createTime: string
}

const ApiKeySetting = () => {
  const toast = useToast()

  const column: ColumnDef<ApiKey>[] = [
    {
      accessorKey: "name",
      header: "名称"
    },
    {
      accessorKey: "key",
      header: "密钥",
      cell: ({ row }) => {
        const key = row.getValue<string>("key")

        return (
          <div className="flex items-center">
            <span className="font-mono">{Array.from({ length: key.length }).fill("*").join("")}</span>
            <Button variant="ghost" size="sm" className="ml-1" onClick={() => copyToClipboard(key)}>
              <Copy className="h-4 w-4" />
            </Button>
          </div>
        )
      }
    },
    {
      accessorKey: "status",
      header: "状态",
      cell: ({ row }) => {
        const status = row.getValue<string>("status")

        return (
          <div>
            <span
              className={cn(
                "px-2 py-1 rounded-full text-xs",
                status === "active"
                  ? "bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300"
                  : "bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300"
              )}
            >
              {status === "active" ? "活跃" : "已停用"}
            </span>
          </div>
        )
      }
    },
    {
      accessorKey: "createTime",
      header: "创建时间"
    },
    {
      accessorKey: "actions",
      header: "操作",
      cell: () => {
        return (
          <div className="flex space-x-2">
            <Button variant="ghost" size="sm">
              <Trash2 className="h-4 w-4" />
            </Button>
          </div>
        )
      }
    }
  ]

  const data: ApiKey[] = [
    {
      id: 1,
      name: "主应用密钥",
      key: "sk-123abcd1234asasd",
      createTime: "2023-06-15",
      status: "active"
    },
    {
      id: 2,
      name: "数据分析密钥",
      key: "sk-456abcd5678asasd",
      createTime: "2023-06-15",
      status: "active"
    },
    {
      id: 3,
      name: "旧版应用密钥",
      key: "sk-1234ijkl9012asdw",
      createTime: "2023-04-05",
      status: "inactive"
    }
  ]

  const [newKey, setNewKey] = useState({
    name: "",
    key: ""
  })

  const copyToClipboard = (key: string) => {
    copy(key, {
      onCopy: () => {
        toast.success({
          title: "密钥已复制"
        })
      }
    })
  }

  const handleCreateKey = () => {}

  return (
    <div className="space-y-6">
      {/* 创建新密钥 */}
      <Card className="dark:bg-gray-800">
        <CardHeader>
          <CardTitle className="flex items-center">
            <Plus className="mr-2 h-5 w-5" />
            创建新密钥
          </CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <div>
            <Label htmlFor="key-name" className="text-sm font-medium">
              密钥名称
            </Label>
            <Input
              id="key-name"
              value={newKey.name}
              onChange={(e) => setNewKey({ ...newKey, name: e.target.value })}
              placeholder="请输入密钥名称"
              className="mt-1"
            />
          </div>

          <div>
            <Label htmlFor="key" className="text-sm font-medium">
              API Key
            </Label>
            <Input
              id="key"
              type="password"
              value={newKey.key}
              onChange={(e) => setNewKey({ ...newKey, key: e.target.value })}
              placeholder="请输入您的API Key"
              className="mt-1"
            />
          </div>

          <div className="pt-2">
            <Button disabled={!newKey.name || !newKey.key} onClick={handleCreateKey}>
              <Key className="mr-2 h-4 w-4" />
              生成密钥
            </Button>
          </div>
        </CardContent>
      </Card>

      {/* 密钥列表 */}
      <Card className="dark:bg-gray-800">
        <CardHeader>
          <CardTitle className="flex items-center">
            <Key className="mr-2 h-5 w-5" />
            API密钥列表
          </CardTitle>
        </CardHeader>
        <CardContent>
          <DataTable data={data} columns={column} />
        </CardContent>
      </Card>
    </div>
  )
}

export default ApiKeySetting
